<template>
    <div class="container">
        <div class="row">
        <ForumHeader/>
        <div style="margin: 80px;"></div>
        <el-table
            :data="bannerData"
            style="width: 100%">
        <el-table-column
                prop="bannerid"
                label="封禁唯一id"
                width="180">
        </el-table-column>
        <el-table-column
                prop="bannerusername"
                label="封禁用户姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="banneradminname"
                label="封禁操作管理员名">
        </el-table-column>
        <el-table-column
                prop="bannertime"
                label="封禁时间">
        </el-table-column>
        <el-table-column
                prop="bannerreason"
                label="封禁原因">
        </el-table-column>
        <el-table-column
                prop="bannerstatus"
                label="封禁状态">
        </el-table-column>
        </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.query.page"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="this.query.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total">
    </el-pagination>
    </div>
    </div>
</template>

<script>
import ForumHeader from './ForumHeader.vue';
export default {
    name:"bannerList",
    components:{ForumHeader},
    data() {
        return {
            bannerData:[],
            total:0,
                query: {
                    page:1,
                    size:5,
                },
            // bannerform: {
            //     bannerid:'',
            //     bannerusername:"",
            //     banneradminname:'',
            //     bannertime:'',
            //     bannerreason:"",
            //     bannerstatus:0,
            // },
        }
    },
    mounted(){
        this.getBannerList();
    },
    methods:{
        getBannerList(){
            this.axios.get('http://localhost:8001/banner/getbannerList',{
                params:{
                    page:this.query.page,
                    size:this.query.size,
                }
            }).then((resp)=>{
                this.bannerData = resp.data.content.list;
                this.total = resp.data.content.total;
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.query.size = val;
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.query.page = val;
            this.getList();
        },
    },
}
</script>

<style>

</style>